<template>
	<view class="repair-wrap">

		<view>
			<view class="repair-box u-p-40 u-p-l-30 u-p-r-30">

				<view style="float: right; color: blue;font-size: 15px;font-weight: 900;margin-top: -40rpx;">

					<view style="    margin-top: 5px">
						<view
							style="color: #ffffff;background: #F9A832;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="againObj.renovate_state ==1">待审批</view>
						<view
							style="color: #ffffff;background:#5599FF;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="userObj.renovate_state ==2 || userObj.renovate_state ==9">
							{{userObj.renovate_state ==2?"申请退款":"待开始装修"}}
						</view>
						<view
							style="color: #ffffff;background:#AA0000;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="userObj.renovate_state ==3 || userObj.renovate_state ==11">
							{{userObj.renovate_state ==3?"未通过":"申请未同意"}}
						</view>
						<view
							style="color: #ffffff;background: #55AA00;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="userObj.renovate_state ==4">待退款</view>
						<view
							style="color: #ffffff;background:#CC6600;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="userObj.renovate_state ==5">待验收</view>
						<view
							style="color: #ffffff;background:#0088A8;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="userObj.renovate_state ==6">待确认</view>
						<view
							style="color: #ffffff;background:red;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="userObj.renovate_state ==7">已退款</view>

						<view
							style="color: #ffffff;background:green;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="userObj.renovate_state ==8">待审核</view>

						<view
							style="color: #ffffff;background:red;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="userObj.renovate_state ==13">
							{{userObj.approval_status==0?"物业公司审批":"业主审批"}}
						</view>


					</view>
				</view>

				<view style="margin-top: 25px;">
					<h2 style="text-align: center;">
						{{userObj.house_type==null || userObj.house_type==1   ?"楼宇号:":userObj.house_type==2?"公房名称:":"房间名称:"}}

						{{ userObj.house_type==null || userObj.house_type==1  ?
							userObj.renovate_district + '-' + userObj.renovate_floor +
							'-' + userObj.renovate_unit + '-' + userObj.renovate_house_number
							:userObj.house_type==2?userObj.pubilc_name:userObj.house_type==3?userObj.roomInfo:""}}
					</h2>
				</view>



        <view v-if="steps==1">
          <view class=" u-m-t-24">
            <span style="font-size: 18px;font-weight: 900;">装修信息：</span>
          </view>
          <view style="padding: 0 20px;">

            <view class="header-form">
              <view class="header-li1" style="padding-bottom: 13px;">
                <view class="header-name">
                  <h4 >装修周期：</h4>
                </view>
                <view class="example-body" style="margin-top: 10px;">
                  <uni-datetime-picker v-model='timeDate' type="daterange" :clear-icon="true"
                                       rangeSeparator="至" @change="bindDateChange" />
                </view>

              </view>

              <view class="header-li">
                <view class="header-name">
                  <h4 >公司名称：</h4>
                </view>
                <textarea placeholder="请输入装修公司名称" v-model="againObj.renovate_outsource_org_name"
                          class="text-area"></textarea>
              </view>
              <view class="header-li">
                <view class="header-name">
                  <h4 >公司电话：</h4>
                </view>
                <textarea placeholder="请输入装修公司电话" v-model="againObj.renovate_outsource_org_tel"
                          class="text-area"></textarea>
              </view>

              <view>
                <view class="header-li">
                  <view class="header-name">
                    <h4 >地址：</h4>
                  </view>
                  <textarea placeholder="请输入装修地址" v-model="againObj.renovate_address"
                            class="text-area"></textarea>
                </view>
                <view class="header-li">
                  <view class="header-name">
                    <h4 >负责人：</h4>
                  </view>
                  <textarea placeholder="请输入装修负责人姓名" v-model="againObj.renovate_owner_name"
                            class="text-area"></textarea>
                </view>
                <view class="header-li">
                  <view class="header-name">
                    <h4 >负责人电话：</h4>
                  </view>
                  <textarea placeholder="请输入" v-model="againObj.renovate_owner_tel"
                            class="text-area"></textarea>
                </view>
                <view style="margin-bottom: 20px"></view>
                <view class="u-m-b-20 u-font-32" style="display: flex;">
                  <h4>    上传合同：</h4>

                  <span style="	display: flex;
			align-items: center;">
									<span @click="uoloadHouse" v-if="againObj.renovate_contract_image"
                        style="color: blue;display: flex;">

										<span style="color: blue;font-size: 15px;font-weight: 900;"
                          @click="imageBig(userObj.renovate_contract_image)">查看pdf装修合同</span>
										<span style="margin-left: 20px;color: red;margin-top: -2px;
"></span>
									</span>
								</span>

                </view>

                <view v-show="againObj.renovate_type != 2">
                  <view class="header-li">
                    <view class="header-name">
                      <h4 >营业执照：</h4>
                    </view>
                    <view class="guarn-box guarn-box2 u-m-t-20"
                          style="margin-left: 38px;margin-bottom: 12px;">
                      <view class="guarn-box2-img">
                        <image @click="uoloadHouse1" :src="againObj.renovate_licence_image"></image>
                        <!-- <u-icon @click="colseImg1(againObj.renovate_licence_image)" name="close" color="red" size="40" class="guarn-box2-img-close"></u-icon> -->
                      </view>
                    </view>
                  </view>
                </view>
                <view class="header-li" v-if="againObj.renovate_construct_image">
                  <view class="header-name">
                    <h4 style="color: #999;">施工图：</h4>
                  </view>
                  <view class="guarn-box guarn-box2 u-m-t-20"
                        style="margin-left: 38px;margin-bottom: 12px;">
                    <view class="guarn-box2-img">
                      <image @click="uoloadHouse2" :src="againObj.renovate_construct_image"></image>
                      <!-- <u-icon  @click="colseImg2(againObj.renovate_construct_image)" name="close" color="red" size="40" class="guarn-box2-img-close"></u-icon> -->
                    </view>
                  </view>
                </view>
                <view class="header-li" v-if="againObj.renovate_result_image">
                  <view class="header-name">
                    <h4 style="color: #999;">效果图：</h4>
                  </view>
                  <view class="guarn-box guarn-box2 u-m-t-20"
                        style="margin-left: 38px;margin-bottom: 12px;">
                    <view class="guarn-box2-img">
                      <image @click="uoloadHouse3" :src="againObj.renovate_result_image"></image>
                      <!-- <u-icon  @click="colseImg3(againObj.renovate_result_image)" name="close" color="red" size="40" class="guarn-box2-img-close"></u-icon> -->
                    </view>
                  </view>
                </view>
              </view>

            </view>

          </view>
          <view class=" u-m-t-24">
            <span style="font-size: 18px;font-weight: 900;">装修外包信息</span>
          </view>
          <view style="padding: 0px 10px;margin-top: 30px;">
            <view class="repair-box u-p-l-30 u-p-r-30" style="margin-top: -20px;">
              <view class="header-form" v-for="(item,index) in againObj.workList">
                <view v-if="index==0">
                  <view class="header-li">
                    <view class="header-name">
                      <h4 >姓名</h4>
                    </view>
                    <textarea placeholder="请输入姓名" v-model="item.worker_name"
                              class="text-area"></textarea>
                  </view>
                  <view class="header-li">
                    <view class="header-name">
                      <h4 >身份证号码</h4>
                    </view>
                    <textarea placeholder="请输入身份证号码" v-model="item.worker_card"
                              class="text-area"></textarea>
                  </view>

                  <view style="margin-bottom: 20px;">
                    <view class="header-li">
                      <view class="header-name">
                        <h4 >电话</h4>
                      </view>
                      <textarea placeholder="请输入电话" v-model="item.worker_tel"
                                class="text-area"></textarea>
                    </view>
                    <view class="header-li" v-if="item.worker_image != null">
                      <view class="header-name">
                        <h4 style="color: #999;">免冠照</h4>
                      </view>
                      <view style="width: 100px;height: 100px;padding: 6px;">
                        <image @click="uoloadHouse4(index)" style="width: 100%;height: 100%;"
                               :src="item.worker_image" mode="">
                        </image>
                      </view>
                    </view>
                  </view>
                </view>

              </view>
            </view>

          </view>
        </view>

        <view v-if="steps==2">
          <view class="repair-box u-p-l-30 u-p-r-30" >
            <view class="u-m-t-20 u-p-40 u-p-l-80 u-p-r-30" style="text-align: center;">
              <text style="color: #999999;">押金金额</text><br>
              <text style="font-size: 20px;text-align: center;" >
                <span style="color: #F9A832;font-size: 35px;    margin-right: 5px;"> {{againObj.money}} </span><span
                  style="color: #000;">元</span></text>

            </view>

          </view>

          <view class="mainpayment">
            <view class="mian_content1">
              <view class="u-flex">
                <image style="width: 25px;height: 25px;" src="../../static/image/wechatFriend.png" mode="">
                </image>
                <view style="margin-left: 5px;font-size: 16px;margin-right: 6px;margin-top: -2px;">微信支付
                </view>
                <u-checkbox shape="circle" v-model="weChat" active-color="#427705c7"
                            @change="handleWechat(1)"><span style="color: #999;" </span></u-checkbox>
              </view>
              <view class="u-flex">
                <image style="width: 20px;height: 20px;" src="../../static/image/zhifubao.png" mode="">
                </image>
                <view style="margin-left: 5px;font-size: 16px;margin-right: 6px;margin-top: -2px">支付宝支付
                </view>
                <u-checkbox shape="circle" v-model="alipay" active-color="#427705c7"
                            @change="handleWechat(2)"><span style="color: #999;" </span></u-checkbox>
              </view>
            </view>

          </view>

          <view class="foot">
            <view class="footer u-padding-left-30">

              <view style="display: flex;justify-content:space-between">
                <view class="u-m-t-32 u-font-32 u-m-r-20">合计：<text style="font-size: 44rpx;color: #F9A832;"
                                                                   class="txet">￥{{againObj.money}}</text></view>
                <view class="button52" v-if="weChat" @click="">立即支付</view>
                <view class="button52" v-if="alipay" @click="chargeBtn()">立即支付</view>
              </view>
            </view>
          </view>
        </view>
      </view>



		</view>
		<view style="margin-top: 25px;margin-bottom: 50px;" v-if="steps==1">
			<button class="button3" @click="updateedit(1)">确认提交</button>
		</view>

	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			return {
				//装修类型

				index: 0,
				againObj: {

					money: null,

				},
				pageIndex: 1,
				timeDate: null,

        steps:1,

        //微信
        weChat: true,
        //支付宝
        alipay: false,
        applyForm: {

        },
      }
		},
		onLoad(options) {
			this.userObj = JSON.parse(decodeURIComponent(options.item));
			this.againObj = this.userObj
			if (this.againObj) {
				this.tiemDate(this.userObj.renovate_begin_time)
				this.timeDate = [this.userObj.renovate_begin_time, this.userObj.renovate_last_time]

			}
			this.getwhetherList(this.userObj);

		},
		onShow() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			console.log(this.homelist)
		},
		methods: {

      async getwhetherList(val) {
        console.log(val,"---da1")
        uni.showLoading({
          title: "加载中"
        })
        console.log(this.userObj)
        let res = this.$request.api.whetherList({
          project_id: val.project_id,
          room_id: val.room_id,
          // room_id:uni.getStorageSync('projectItem').roomId
        }).then(res => {
          if (res.data.code == 0) {
            this.againObj.money = res.data.data.deposit;

          }
          uni.hideLoading()
          uni.stopPullDownRefresh()
        })
      },


      handleWechat(num) {
        if (num == 1) {
          this.weChat = true
          this.alipay = false
        } else {
          this.alipay = true
          this.weChat = false
        }
      },

      chargeBtn() {

        console.log(this.chargeList.data.money, "==================dad1")
        const order = this.chargeList.data.code; //订单编号
        const money = Number(this.chargeList.data.money).toFixed(2); //金额
        const proId = this.chargeList.data.pro_id;
        const URL = encodeURIComponent(`https://www.515f.com/adapay?key=${order}&money=${money}&proId=${proId}`);
        let authUrl = `alipays://platformapi/startapp?saId=10000007&qrcode=` + URL;
        //console.log(authUrl);
        plus.runtime.openURL(authUrl, function(res) {
          uni.showToast({
            icon: "none",
            title: "请安装支付宝之后再进行支付！",
          });
        });
      },

      //收取押金
      getdepositList() {

        // var beginTime = this.applyForm.renovate_begin_time[0]
        // var endTime = this.applyForm.renovate_begin_time[1]
        // this.applyForm.renovate_begin_time = beginTime;
        // this.applyForm.renovate_last_time = beginTime

        this.againObj.phone=uni.getStorageSync('projectItem').ownerTel,
            console.log(this.againObj.phone)
        let res = this.$request.api.depositList(this.againObj, {

        }).then(res => {
          this.chargeList = res.data
          console.log(this.chargeList, "---------------------------dad1")
          // console.log(res)
        })
      },



			//获取当前开始时间和当前时间进行判断

			tiemDate: function(tiem) {

				var _this = this;
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				mm = mm < 10 ? "0" + mm : mm; // 补0操作
				dd = dd < 10 ? "0" + dd : dd; // 补0操作
				_this.nowDate = yy + "-" + mm + "-" + dd; // 改为2023-09-22
				console.log(_this.nowDate, "-----------dadada1")

				console.log(tiem, "-----------dadada1")
				if (tiem <= _this.nowDate) {
					this.userObj.renovate_begin_time = null;
					this.userObj.renovate_last_time = null;
				}

			},


			imageBig(url) {
				uni.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				})
			},

			updateedit(type) {
        if (type==1){
          this.steps=2
          this.getdepositList();
        }else if (type==2){
          uni.showModal({
            title: '提示',
            content: '重新申请成功！',
            success: (res) => {
              if (res.confirm) {
                this.editBtn();
              } else if (res.cancel) {
                console.log('用户点击了取消按钮');
              }
            }
          });
        }


			},


      validateIDCard2(idCard) {
        console.log(idCard)
        // 身份证正则表达式
        const idCardRegex = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
        return idCardRegex.test(idCard);
      },
      checkPhoneNumber: function(phoneNumber) {
        var reg = /^1[3456789]\d{9}$/;
        return reg.test(phoneNumber)
      },


      // 编辑后确认提交
			editBtn() {
				console.log(this.againObj.renovate_begin_time);
				console.log(this.againObj.renovate_last_time);
				if (!this.timeDate) {
					uni.showModal({
						title: '提示',
						content: '请重新填写装修周期！',
						showCancel: false,
						success: (res) => {

						}
					});
					return;
				}

				this.$set(this.againObj, 'phone', uni.getStorageSync('projectItem').ownerTel);
				this.$set(this.againObj, 'money', this.againObj.renovate_deposit);
				let res = this.$request.api.againBtn(this.againObj, {

				}).then(res => {
					uni.reLaunch({ // 跳转页面
						url: "/pages/renovation/renovationindex"
					});
				});
			},
			bindDateChange: function(e) {


				this.againObj.renovate_begin_time = e[0];
				this.againObj.renovate_last_time = e[1];
				console.log(this.againObj.renovate_begin_time)
				console.log(this.againObj.renovate_last_time)
				return

				this.daterange = e
				// this.date = e.detail.value
			},
			//获取发布类型
			typeBtn: function(e) {
				this.index = e.target.value
				this.applyForm.renovate_type = this.typaBtne[this.index].id
			},
			//装修合同
			colseImg(val) {
				this.againObj.renovate_contract_image = null;
				if (!this.againObj.renovate_contract_image) {
					this.imgFlag = true
				}
			},
			// 选择图片
			uoloadHouse() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.againObj
												.renovate_contract_imagee = res
												.data.data
											_this.imgFlag = false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.againObj
												.renovate_contract_image = res.data
												.data
											_this.imgFlag = false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
			//营业执照
			colseImg1(val) {
				this.againObj.renovate_licence_image = null;
				if (!this.againObj.renovate_licence_image) {
					this.imgFlag = true
				}
			},
			// 选择图片
			uoloadHouse1() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.againObj.renovate_licence_image =
												res.data.data
											_this.imgFlag = false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.againObj.renovate_licence_image =
												res.data.data
											_this.imgFlag = false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
			//装修施工图
			colseImg2(val) {
				this.againObj.renovate_construct_image = null;
				if (!this.againObj.renovate_construct_image) {
					this.imgFlag = true
				}
			},
			// 选择图片
			uoloadHouse2() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.againObj
												.renovate_construct_image = res
												.data.data
											_this.imgFlag = false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.againObj
												.renovate_construct_image = res
												.data.data
											_this.imgFlag = false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
			//装修效果图
			colseImg3(val) {
				this.againObj.renovate_result_image = null;
				if (!this.againObj.renovate_result_image) {
					this.imgFlag = true
				}
			},
			// 选择图片
			uoloadHouse3() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.againObj.renovate_result_image =
												res.data.data
											_this.imgFlag = false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.againObj.renovate_result_image =
												res.data.data
											_this.imgFlag = false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},


			uoloadHouse4(index) {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.againObj.workList[index]
												.worker_image =
												res.data.data
											_this.imgFlag = false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.againObj.workList[index]
												.worker_image =
												res.data.data
											_this.imgFlag = false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
		}
	}
</script>


<style lang="scss" scoped>
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #F9A832;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #F9A832;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.button {
		height: 40px;
		line-height: 40px;
		width: 34%;
		border-radius: 33px;
		border: 1px solid #CCCCCC;
	}

	.button1 {
		height: 40px;
		line-height: 40px;
		width: 80%;
		border-radius: 33px;
		border: 1px solid #F9A832;
		color: #FFFFFF;
		background-color: #F9A832;
	}

	.button:hover {
		border: 1px solid #F9A832;
		color: #FFFFFF;
		background-color: #F9A832;
	}

	.header-form {

		background: #FFFFFF;

		.header-li {
			// padding:0 45rpx;
			display: flex;
			// align-items: center;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 95rpx;
			color: #333333;
			border-bottom: 1rpx solid #EEEEEE;

			.header-name {
				width: 137px;
			}

			.text-area {
				width: 420rpx;
				padding-top: 26rpx;
				height: 60rpx;
				color: #000;
				font-weight: 600;
			}
		}
	}

	.guarn-box {
		width: 100%;
		height: 145px;

	}

	.guarn-box-img {
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
		margin-left: 72rpx;
		margin-top: 10px
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}

	.header-li {
		display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.foot_item {
		margin-top: 40rpx;
		height: 280rpx;
	}

	.button2 {
		width: 40%;
		height: 30%;
		float: left;
		margin-left: 33px;
		color: #F9A832;
		border: 1px solid #F9A832;
		background-color: #ffffff;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}

	.button_in {
		width: 40%;
		height: 31%;
		float: right;
		background-color: #F9A832;
		margin-right: 34px;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.button_renovation {
		width: 31%;
		font-size: 10px;
		border-radius: 11px;
		border: 1px solid #2986FF;
		background-color: rgb(255, 255, 255);
		margin-right: 249px;
		color: #2986FF;
		margin-top: 20px;
	}

	.footers {
		width: 100%;
		background-color: #FFFFFF;
		height: 72px;
		position: fixed;
		bottom: 0px;
		left: 0px;
	}

	.footer {
		width: 95%;
		margin: 40rpx 20rpx;
		// position:fixed;
		// bottom:0px;
		// left:0px;
	}

	.footer-btn {
		// display: flex;
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-left: 300rpx;
		float: right;
		text-align: center;
		background-color: #F9A832;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.details {
		color: #FFFFFF;

	}

	.button5 {
		position: relative;
		// left: 264rpx;
		top: -46rpx;
	}

	.payment {
		width: 50px;
		height: 50px;
		border: 1px solid #C0C0C0;
		border-radius: 12px;
	}

	.payment_img {
		width: 35px;
		margin-top: 10px;
		margin-left: 7px;
	}

	.payment:hover {
		border: 1px solid #F9A832;
		cursor: hand;
	}

	.form-select {
		width: 480rpx;
		background: url(../../static/image/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}

	.header-li1 {
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
		margin-top: 10px;
	}

	.borders1 {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #CCCCCCFF;
		margin-top: 14px;
		margin-left: 10px;
	}

	.borders11 {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #FFF9A832;
		background-color: #FFF9A832;
		margin-top: 14px;
		color: #F9A832FF;
		margin-left: 10px;
	}

	.borders2 {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #CCCCCCFF;
		margin-top: 14px;
		margin-left: 10px;
	}

	.borders22 {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #FFF9A832;
		background-color: #FFF9A832;
		margin-top: 14px;
		color: #F9A832FF;
		margin-left: 10px;
	}

	.bordersCX {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #CCCCCCFF;
		margin-top: 14px;
		margin-left: 10px;
	}

	.bordersCX2 {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #FFF9A832;
		background-color: #FFF9A832;
		margin-top: 14px;
		color: #F9A832FF;
		margin-left: 10px;
	}

	.guarn-box-txt {
		width: 420rpx;
		height: 216rpx;
		color: #999;
		float: left;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		background: #F9A832;
		background-color: #F9A832;
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}

	.guarn-box {
		width: 100%;
		height: 216rpx;
	}

	.guarn-box2 {
		display: flex;
	}

	.guarn-box2-img {
		width: 216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;

		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}

	.guarn-box2 image {
		width: 216rpx;
		height: 216rpx;
	}

	.guarn-box-img {
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}

	.button3 {
		height: 40px;
		line-height: 40px;
		width: 80%;
		border-radius: 33px;
		color: #FFFFFF;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
	}
  .mainpayment {
    padding: 10px;
    position: fixed;
    bottom: 52px;
    width: 100%;
  }
  .mian_content1 {
    background: #fff;
    padding: 80rpx 36rpx;
    margin-top: 22px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
  }
  .button52 {
    text-align: center;
    background: linear-gradient(142deg, #42770591 0%, #427705FF 100%);
    color: #fff;
    padding: 7px 18px;
    border-radius: 8px;
    margin-right: 10px;
    margin-top: 15px;
  }

</style>